<template>
  <div class="paypwd">
    <ContentBox :fixed="true" title="重置登陆密码" @right="setPWD">
      <template slot="oleft"><van-icon color="#000000" name="arrow-left"/></template>
      <template slot="oright"><span>提交</span></template>
    </ContentBox>
    <notice :top="$remToPx('0.88')" class="not"></notice>
    <van-cell-group>
      <van-field
        v-model="payment_pwd"
        label="新密码"
        placeholder="请输入新密码"
      />
      <van-field
        v-model="account"
        label="手机号"
        placeholder="请输入手机号"
      />
      <van-field
        v-model="captcha"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <van-button slot="button" v-if="unSend" size="small" type="primary" @click="sendCode" color="#FF2A1F" class="codebtn">{{sendCodeText}}</van-button>
        <van-button slot="button" size="small" type="primary" color="#FF2A1F" v-else class="codebtn"><van-count-down
          millisecond
          :time="time"
          format="ss s"
          @finish="timeFinish"
        /></van-button>
      </van-field>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      account: '',
      password: '',
      captcha: '',
      sendCodeText: '发送验证码',
      unSend: true,
      time: 60 * 1000
    }
  },
  methods: {
    sendCode () {
      if (this.account === '' || !/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.account)) {
        this.$toast({ message: '手机号格式不正确' })
        return false
      }
      this.unSend = false
      this.$axios.post('/api/sms_send', {
        action_id: 'sms_setpassword',
        account: this.account
      }).then(res => {
        if (res.status === 200) {
          this.$toast('发送成功')
        }
      })
    },
    setPWD () {
      if (this.captcha === '') {
        this.$toast('请输入验证码')
        return false
      }
      if (this.account === '' || !/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.account)) {
        this.$toast({ message: '手机号格式不正确' })
        return false
      }
      if (this.password === '' || this.password.length !== 6 || !/^[0-9]{6}$/.test(this.password)) {
        this.$toast({ message: '支付密码格式不正确' })
        return false
      }
      this.$axios.post('/api/register/reset', {
        password: this.password,
        captcha: this.captcha,
        account: this.account
      }).then(res => {
        if (res.status === 200) {
          this.$toast.success('重置成功')
          this.$router.replace('/account')
        }
      })
    },
    timeFinish () {
      this.unSend = true
    }
  }
}
</script>

<style lang="scss">
.paypwd{
  height: 100%;
  padding-top:  1.36rem;
  background: #f0f0f0;
  .codebtn{
    width: 1.56rem;
    .van-count-down{
      color: #ffffff;
    }
  }
}
</style>
